<template>
  <div class="gray-page record-page appraisal-page">
    <nav-bar title="绩效考核"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <div class="appraisal-report">
        <div class="appraisal-report-title">
          <img class="appraisal-report-title--icon" src="@/assets/images/basic/icon_calendar_black@2x.png" alt="" />
          &emsp;
          <span>发布时间：</span>
          <span class="appraisal-report-title--date">{{ date }}</span>
        </div>
        <div class="appraisal-entry" @click="$router.push('/routine/appraisal/requirement')">
          <van-row>
            <van-col :span="16">
              <p class="appraisal-entry-title">最新绩效考核要求</p>
            </van-col>
          </van-row>
        </div>
      </div>
      <template v-if="weekList.length">
        <div class="record-title">本年度绩效</div>
        <div class="record-list">
          <van-cell
            is-link
            v-for="(item, key) in weekList"
            :key="key"
            :to="`/routine/appraisal/detail?assessmentCode=${item.assessmentCode}&assessmentTime=${item.assessmentTime}`"
          >
            <template #title>
              <img class="record-list-icon" src="@/assets/images/basic/icon_calendar_blue@2x.png" alt="" />
              <span class="record-list-date">{{ item.assessmentTime }}</span>
            </template>
          </van-cell>
        </div>
      </template>
      <div class="record-title">更早</div>
      <van-search
        readonly
        background="#f6f6f6"
        v-model="searchForm.dateRangeStr"
        placeholder="选择查询日期"
        :left-icon="searchLeftIcon"
        :right-icon="searchRightIcon"
        clearable
        @click="datePopupShow = true"
      />
      <div class="record-list" v-if="moreList.length">
        <van-cell
          is-link
          v-for="(item, key) in moreList"
          :key="key"
          :to="`/routine/appraisal/detail?assessmentCode=${item.assessmentCode}&assessmentTime=${item.assessmentTime}`"
        >
          <template #title>
            <img class="record-list-icon" src="@/assets/images/basic/icon_calendar_blue@2x.png" alt="" />
            <span class="record-list-date">{{ item.assessmentTime }}</span>
          </template>
        </van-cell>
      </div>
      <template v-else>
        <van-empty
          :image="require('@/assets/images/basic/pic_no_content.png')"
          description="暂无内容~"
          style="height: 300px"
        />
      </template>
    </div>
    <van-popup v-model="datePopupShow" round position="bottom">
      <date-range-picker
        v-model="searchForm.dateRange"
        :dateType="'yyyy-mm'"
        @change="handleDateRangeChange"
      ></date-range-picker>
    </van-popup>
  </div>
</template>
<script>
import Routine from '@/api/routine'
import { formatTimes } from '@/libs/tool'
export default {
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      searchRightIcon: require('@/assets/images/basic/icon_calendar_black@2x.png'),
      date: formatTimes.formatDateCN(new Date()),
      week: formatTimes.formatWeek(new Date()),
      searchForm: {
        type: '1',
        startTime: '',
        endTime: '',
        dateRangeStr: '',
        dateRange: []
      },
      weekList: [],
      moreList: [],
      datePopupShow: false
    }
  },
  created() {
    this.getList()
    this.getMoreList('2')
  },
  methods: {
    // 本年度绩效
    getList() {
      Routine.Appraisal.list(this.searchForm).then(res => {
        if (res.data.status === 0) {
          this.weekList = res.data.data.currentYearList
        }
      })
    },
    // 更早
    getMoreList(type) {
      this.searchForm.type = type
      Routine.Appraisal.list(this.searchForm).then(res => {
        if (res.data.status === 0) {
          this.moreList = res.data.data.otherList
        }
      })
    },
    handleDateRangeChange() {
      this.searchForm.dateRangeStr = this.searchForm.dateRange.join('-')
      this.searchForm.startTime = this.searchForm.dateRange[0]
      this.searchForm.endTime = this.searchForm.dateRange[1]
      this.datePopupShow = false
      this.getMoreList('3')
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/record.less';
@import '~@/assets/style/routine/appraisal/index.less';
</style>
